<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<% pageContext.setAttribute("path",request.getContextPath()); %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工列表</title>

<!-- 
不以/开始的是相对路径，以当前资源的路径为基准
以/开始，以服务器的路径为标准(http://localhost:8080),需要加上项目名
 -->
<script type="text/javascript" src="${path}/static/js/jquery-1.12.4.min.js"></script>
<script src="${path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>


	<!-- 员工修改的模态框  -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">员工添加</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
	        
				  <div class="form-group">
				    <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
				    <div class="col-sm-10">
				      	<p class="form-control-static" id="empName_update_static"></p>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label">email</label>
				    <div class="col-sm-10">
				      <input type="text" name="email" class="form-control" id="email_update_input" placeholder="1175724920@163.com">
				      <span class="help-block"></span>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label">gender</label>
				    <div class="col-sm-10">
					    <label class="radio-inline">
							<input type="radio" name="gender" id="gender1_update_input" value="m" checked="checked"> 男
						</label>
						<label class="radio-inline">
							<input type="radio" name="gender" id="gender2_update_input" value="f"> 女
						</label>
				    </div>
				  </div>
				  
				    <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label" id="dept_add_select">部门名</label>
				    <div class="col-sm-4">
					  	<select class="form-control" name="dId">
						</select>
				    </div>
				  </div>  
			</form>	
	      </div>
	      <div class="modal-footer"> 
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
	      </div>
	    </div>
	  </div>
	</div><!-- id=empUpdateModal -->



	<!-- 员工添加的模态框  -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
	        
				  <div class="form-group">
				    <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
				    <div class="col-sm-10">
				      <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
				       <span class="help-block"></span>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label">email</label>
				    <div class="col-sm-10">
				      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="1175724920@163.com">
				      <span class="help-block"></span>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label">gender</label>
				    <div class="col-sm-10">
					    <label class="radio-inline">
							<input type="radio" name="gender" id="gender1_add_input" value="m" checked="checked"> 男
						</label>
						<label class="radio-inline">
							<input type="radio" name="gender" id="gender2_add_input" value="f"> 女
						</label>
				    </div>
				  </div>
				  
				    <div class="form-group">
				    <label for="email_add_input" class="col-sm-2 control-label" id="dept_add_select">部门名</label>
				    <div class="col-sm-4">
					  	<select class="form-control" name="dId">
						</select>
				    </div>
				  </div>  
			</form>	
	      </div>
	      <div class="modal-footer"> 
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
	      </div>
	    </div>
	  </div>
	</div><!-- id=empAddModal -->
	
	
	
	






	<!-- 显示的页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
			</div>
		</div>
		
		<!-- 表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover" id="emps_table">
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="check_all"/>
						</th>
						<th>#</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
				</thead>
				
				<tbody>
					
				</tbody>
					
				</table>
			</div>
		</div>
		
		<!-- 分页信息 -->
		<div class="row">
			<!-- 分页文字信息 -->
			<div class="col-md-6" id="page_info_area">
				
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
			
			</div>
		</div>
	</div>
	
	
	<script type="text/javascript">
		//定义一个总记录数的变量，方便我们来到最后一页
		var totalRecord,currentPage;
	
	
		//1.页面加载完成后，直接发送一个ajax请求，要到分页的数据
		$(function(){
			to_page(1)
		});
		
		
		//按其他页时作出的跳转请求
		function to_page(pn){
			$.ajax({
				//发送请求的url
				url:"${path}/emps",
				//发送url时附带的数据
				data:"pn="+pn,
				//发送请求的类型
				type:"GET",
				success:function(result){
					//console.log(result);
					//1.解析并显示员工数据
					build_emps_table(result);
					//2.解析并显示分页信息
					buid_page_info(result)
					//3.解析分页条信息
					build_page_nav(result);
				}
			});
		}
		
		//表格的数据
		function build_emps_table(result){
			//每一次执行前我们来清空之前的数据
			$("#emps_table tbody").empty();
			var emps=result.extend.pageInfo.list;
			//这里item就是emps就像jstl的foreach标签的的var属性
			$.each(emps,function(index,item){
				var checkBoxTd=$("<td><input type='checkbox' class='check_item'/></td>")
				//用jQ的dom方式插入数据
				var empIdTd=$("<td></td>").append(item.empId);
				var empNameTd=$("<td></td>").append(item.empName);
				var genderTd=$("<td></td>").append(item.gender=='m'?"男":"女");
				var emailTd=$("<td></td>").append(item.email);
				var deptNameTd=$("<td></td>").append(item.department.deptName);
				
				/*
					<button class="btn btn-primary btn-sm">
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
					</button>
					
						
					<button class="btn btn-danger btn-sm">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
					</button>
				*/
				//插入按钮,addClass还会返回button元素
				//对插入的按钮编辑一个自定义的属性，来代表当前员工的id
				var editBtn=$("<button></button").addClass("btn btn-primary btn-sm edit_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("编辑");
				editBtn.attr("edit-id",item.empId);
				var deptBtn=$("<button></button").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				deptBtn.attr("del-id",item.empId);
				
				var btnTd=$("<td></td>").append(editBtn).append("  ").append(deptBtn);
				
				//append方法执行完以后返回时原来的元素，即<tr></tr>
				$("<tr></tr>").append(checkBoxTd)
					.append(empIdTd)
					.append(empNameTd)
					.append(genderTd)
					.append(emailTd)
					.append(deptNameTd)
					.append(btnTd)
					.appendTo("#emps_table tbody");
					
			});
		}
		
		
		//解析显示分页信息
		function buid_page_info(result){
			//执行前清空之前的数据
			$("#page_info_area").empty();
			
			$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"条记录");
			
			totalRecord=result.extend.pageInfo.total;
			//当前页码
			currentPage=result.extend.pageInfo.pageNum;
		}
		
		
		//解析分页条
		function build_page_nav(result){
			//$("#page_nav_area").append("")
			//清空元素
			$("#page_nav_area").empty();
			var ul=$("<ul></ul>").addClass("pagination");
			
			var fristPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;"));
			//判断是否有前一页
			if(result.extend.pageInfo.hasPreviousPage==false){
				fristPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}
			else{
				//为元素添加点击翻页事件
				fristPageLi.click(function(){
					to_page(1)
				});
				prePageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum-1)
				});
			}
				
			var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			//判断是否有后一页
			if(result.extend.pageInfo.hasNextPage==false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}
			else{
				//为元素添加翻页事件
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.pageNum+1)
				});
				lastPageLi.click(function(){
					
					to_page(result.extend.pageInfo.pages)
				});
			}
				
			//添加首页和前一页
			ul.append(fristPageLi).append(prePageLi);
			
			//这里item是指result.extend.pageInfo.navigatepageNums即1,2,3,4,5
			//$.each(遍历的对象，回调函数，即这个循环要做什么function(index(索引),item(item指前面的遍历对象)))
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi=$("<li></li>").append($("<a></a>").append(item));
				//加上active着重色
				if(result.extend.pageInfo.pageNum==item){
					numLi.addClass("active");
				}
				//添加单击事件，ajax请求道相应的页码
				numLi.click(function(){
					to_page(item)
				});
				
				ul.append(numLi);
			});
			ul.append(nextPageLi).append(lastPageLi);
			//添加末页和下一页
			var navEle=$("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		//表单重置方法
		function reset_form(ele){
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			//找到相应的内容
			$(ele).find(".help-block").text("");
		}
		
		//为增加员工信息的按钮绑定事件
		$("#emp_add_modal_btn").click(function(){
			//清除表单数据,样式,JQ没有reset()方法，是dom对象的方法
			reset_form("#empAddModal form");
			//$("#empAddModal form")[0].reset();
			//发送ajax请求，得到部门信息
			getDepts("#empAddModal select");
			$("#empAddModal").modal({
				backdrop:"static"
			});
		});
		
		//查出所有的部门信息
		function getDepts(ele){
			$(ele).empty();
			$.ajax({
				url:"${path}/depts",
				type:"GET",
				success:function(data){
					//$("#empAddModal select")
					
					$.each(data.extend.depts,function(index,item){
						var optionEle=$("<option></option>").append(item.deptName).attr("value",item.deptId);
						optionEle.appendTo(ele);
					});
				}
			})
		}
		
		//校验表单数据
		function validate_add_form(){
			var empName=$("#empName_add_input").val();
			var reqName=/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
			if(!reqName.test(empName)){
				//alert("用户名是2到5位的中文或3到16到英文字符");
				show_validate_msg("#empName_add_input","error","用户名是2到5位的中文或3到16到英文字符");
				return false;
			}
			else{
				show_validate_msg("#empName_add_input","success","");
			}
			
			var email=$("#email_add_input").val();
			var regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
			if(!regEmail.test(email)){
				//alert("邮箱格式不正确");
				show_validate_msg("#email_add_input","error","邮箱格式不正确");
				//$("#email_add_input").parent().addClass("has-error");
				//$("#email_add_input").next("span").text("邮箱格式不正确");
				return false;
			}
			else{
				show_validate_msg("#email_add_input","success","");
				//$("#email_add_input").parent().addClass("has-success");
				//$("#email_add_input").next("span").text("");
			}
			return true;
		}
		
		//显示校验的提示信息
		//三个元素，校验的元素，校验的状态，校验后返回的信息
		function show_validate_msg(ele,status,msg){
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			if(status=="success"){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}
			else if(status=="error"){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		
		//$("#empAddModal form").serialize()得到表单的数据
		$("#emp_save_btn").click(function(){
			//数据的校验
			if(!validate_add_form()){
				return false;
			}; 
			
			//判断用户名是否重复来让我们是否禁用保存按钮
			if($(this).attr("ajax-va")=="error"){
				return false;
			}
	
			$.ajax({
				url:"${path}/emp",
				type:"POST",
				data:$("#empAddModal form").serialize(),
				success:function(result){
					//验证数据是否正确
					if(result.code==100){
						//执行完后关闭模态框
						$("#empAddModal").modal('hide');
						//来到最后一页，显示保存的数据
						//发送ajax请求，来到最后一页
						to_page(totalRecord);
					}
					else{
						//验证失败显示信息
						if(undefined!=result.extend.errorFields.email){
							//显示邮箱错误信息
							show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
						}
						if(undefined!=result.extemd.errorFields.empName){
							//显示工名的错误
							show_validate_msg("#empName_add_input","error",result.extend.errorFields.empName);
						}
					}
				}
			});
		});
		
		
		//为用户名输入框绑定事件
		//1.判断用户名是否重复
		//2.重复后要将保存按钮禁掉
		$("#empName_add_input").change(function(){
			//发送ajax请求校验用户名是否可用
			var empName=this.value;
			$.ajax({
				url:"${path}/checkUser",
				data:"empName="+empName,
				type:"POST",
				success:function(result){
					if(result.code==100){
						show_validate_msg("#empName_add_input","success","用户名可用");
						$("#emp_save_btn").attr("ajax-va","success");
					}else{
						show_validate_msg("#empName_add_input","error",result.extend.va_msg);
						$("#emp_save_btn").attr("ajax-va","error");
					}
				}
				
			})
		});
		
		//编辑绑上单击事件
		//我们是按钮创建之前就绑定单击事件，所以绑定不上
		//1.可以再创建按钮的时候绑定。
		//2.我们可以用live方法来绑定事件，但是1.7后就没有live方法，与之替代的是on方法
		//on("click",".edit_btn",function(){})第一个参数是指单击事件，第二个是指你要绑定的元素，第三个是指回调函数
		$(document).on("click",".edit_btn",function(){
			reset_form("#empUpdateModal form");
			//alert("edit");
			//1.弹出模态框，显示部门信息
			getDepts("#empUpdateModal select");
			//2.查出员工的信息
			getEmp($(this).attr("edit-id"));
			//3.把员工的id传递给模态框的更新按钮
			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
			$("#empUpdateModal").modal({
				//弹出模态框,backdrop:"static"不需要加分号
				backdrop:"static"
			});
		});
		
		
		//查出员工信息显示
		function getEmp(id){
			$.ajax({
				url:"${path}/emp/"+id,
				type:"GET",
				success:function(result){
					//console.log(result);
					var empData=result.extend.emp;
					$("#empName_update_static").text(empData.empName);
					$("#email_update_input").val(empData.email);
					$("#empUpdateModal input[name=gender]").val([empData.gender]);
					$("#empUpdateModal select").val([empData.dId]);
					
				}
			})
		}
		
		
		//点击更新按钮进行更新操作
		$("#emp_update_btn").click(function(){
			//验证是否合法
			var email=$("#email_update_input").val();
			var regEmail=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
			if(!regEmail.test(email)){
				//alert("邮箱格式不正确");
				show_validate_msg("#email_update_input","error","邮箱格式不正确");
				//$("#email_add_input").parent().addClass("has-error");
				//$("#email_add_input").next("span").text("邮箱格式不正确");
				return false;
			}
			else{
				show_validate_msg("#email_update_input","success","");
				//$("#email_add_input").parent().addClass("has-success");
				//$("#email_add_input").next("span").text("");
			}
			//发送ajax请求
			//1.有两个发送put请求的方法
			//1).type类型还是post请求，在传入的数据后面加上&_method=PUT
			//2.加上HttpPutFormContentFilter和HiddenHttpMethodFilter过滤器
			$.ajax({
				url:"${path}/emp/"+$(this).attr("edit-id"),
				type:"PUT",
				data:$("#empUpdateModal form").serialize(),
				success:function(result){
					//alert(result.msg);
					//关闭模态框
					$("#empUpdateModal").modal("hide");
					to_page(currentPage);
				}
			})
		})
		
		//删除单个员工的ajax请求
		$(document).on("click",".delete_btn",function(){
			var empId=$(this).attr("del-id");
			var empName=$(this).parents("tr").find("td:eq(2)").text();
			if(confirm("确认删除【"+empName+"】吗？")){
				$.ajax({
					url:"${path}/emp/"+empId,
					type:"DELETE",
					success:function(result){
						to_page(currentPage);
					}
				})
			}
		});
		
		//全选功能
		$("#check_all").click(function(){
			//attr获取checked是undefinded;
			//我们这些dom属性应该用prop获取，而attr属性来获取我们自己定义的值
			$('.check_item').prop("checked",$(this).prop("checked"));
		});
		
		$(document).on("click",".check_item",function(){
			//判断选中的元素是否是全部,checked匹配所有选中的复选框
			if($(".check_item:checked").length==$(".check_item").length){
				$("#check_all").prop("checked",true);
			}
			else{
				$("#check_all").prop("checked",false);
			}
		});
		
		//批量删除的功能
		$("#emp_delete_all_btn").click(function(){
			var empNames="";
			var ids="";
			$.each($(".check_item:checked"),function(){
				//员工的姓名
				empNames +=$(this).parents("tr").find("td:eq(2)").text()+",";
				//员工id的字符串
				ids +=$(this).parents("tr").find("td:eq(1)").text()+"-";
			});
			//去掉最后一个逗号
			empNames=empNames.substring(0,empNames.length-1);
			ids=ids.substring(0,ids.length-1);
			alert(ids);
			if(confirm("确认删除【"+empNames+"】吗？")){
				$.ajax({
					url:"${path}/emp/"+ids,
					type:"DELETE",
					success:function(result){
						alert(result.msg);
						to_page(currentPage);
					}
				})
			}
		});
	</script>
</body>
</html>